<template>
  <div class="banner">
    <div class="item">
      <img :src="dataList[currentIndex]" />
    </div>
    <div class="page" v-if="this.dataList.length > 1">
      <ul>
        <li
          v-for="(item, index) in dataList"
          :key="index"
          @click="gotoPage(index)"
          :class="{ current: currentIndex == index }"
        ></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [
        "http://p1.music.126.net/GbCOmWdvvwCLa73OBKhRQw==/109951165826736136.jpg?imageView&quality=89",
        "http://p1.music.126.net/nomAhKIMY2uE9Wdr5ZWi-A==/109951165826838091.jpg?imageView&quality=89",
        "http://p1.music.126.net/JDA9Mc6YO3nTMnEimb3rcQ==/109951165826728087.jpg?imageView&quality=89",
      ],
      currentIndex: 0, //默认显示图片
      timer: null, //定时器
    };
  },
  created() {
    //定时器

    this.timer = setInterval(() => {
      this.gotoPage(this.nextIndex);
    }, 2000);
  },
  methods: {
    gotoPage(index) {
      this.currentIndex = index;
    },
  },
  computed: {
    //上一张
    prevIndex() {
      if (this.currentIndex == 0) {
        return this.dataList.length - 1;
      } else {
        return this.currentIndex - 1;
      }
    }, //下一张
    nextIndex() {
      if (this.currentIndex == this.dataList.length - 1) {
        return 0;
      } else {
        return this.currentIndex + 1;
      }
    },
  },
};
</script>
<style lang="less" scoped>
ul li {
  float: left;
  width: 30px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  cursor: pointer;
}
.banner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
  position: relative;
  img {
    width: 100%;
    display: block;
    border-radius: 5px;
  }
  .page {
    position: absolute;
    bottom: 10px;
    right: 0px;
    transform: translateX(-50%);
    li {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-left: 5px;
      background-color: #2c2e42;
      .current {
        background-color: #fcfbfc;
      }
    }
  }
}
</style>